<template>
    <div>
        <h1>{{id?`编辑`:`新建`}}英雄</h1>
        <el-form label-width='120px' @submit.native.prevent='save'>
            <!-- <el-form-item label="上级分类"> 
                <el-select v-model="model.parent" placeholder="请选择">
                  <el-option v-for="item in parent" :key='item._id' :label='item.name' :value='item._id'></el-option>
                </el-select>
            </el-form-item>  -->
            <!-- 默认显示是哪一个选项卡 -->
           <el-tabs value='basic'>
                <el-tab-pane label='基本信息' name='basic'>
                        <el-form-item label="名称"> 
                    <el-input v-model="model.name"></el-input>
                </el-form-item>
                <el-form-item label="英雄称号" width="120">
                    <el-input v-model="model.title"></el-input>
                </el-form-item>
                <el-form-item label="头像"> 
                <el-upload 
                    class="avatar-uploader"
                    :action="uploadURL"
                    :headers="getAuthHeaders()"
                    :show-file-list="false"
                    :on-success="res=>$set(model,'avatar',res.url)"
                    >
                        <!-- 有图片显示图片，没有则显示上传图标,:src显示的图片 -->
                        <img v-if="model.avatar" :src="model.avatar" class="avatar"/>
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                </el-form-item>
                <el-form-item label="背景"> 
                <el-upload 
                    class="avatar-uploader"
                    :action="uploadURL"
                    :headers="getAuthHeaders()"
                    :show-file-list="false"
                    :on-success="res=>$set(model,'banner',res.url)"
                    >
                        <!-- 有图片显示图片，没有则显示上传图标,:src显示的图片 -->
                        <img v-if="model.banner" :src="model.banner" class="avatar"/>
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                </el-form-item>


                <el-form-item label="英雄类型" width="120">
                    <el-select v-model="model.categories" multiple>
                    <el-option v-for="item of categories" :label="item.name" :value='item._id' :key="item._id" ></el-option>
                    </el-select>
                </el-form-item> 
                <el-form-item label="难度" width="120">
                    <el-rate style="margin-top:0.6rem" :max='9' v-model="model.scores.difficult"></el-rate>
                </el-form-item>
                <el-form-item label="技能" width="120">
                    <el-rate style="margin-top:0.6rem" :max='9' v-model="model.scores.skills"></el-rate>
                </el-form-item>
                <el-form-item label="攻击" width="120">
                    <el-rate style="margin-top:0.6rem" :max='9' v-model="model.scores.attack"></el-rate>
                </el-form-item>
                <el-form-item label="生存" width="120">
                    <el-rate style="margin-top:0.6rem" :max='9' v-model="model.scores.survive"></el-rate>
                </el-form-item>
                <el-form-item label="顺风出装" width="120">
                    <el-select v-model="model.items1" multiple>
                    <el-option v-for="item of items" :label="item.name" :value='item._id' :key="item._id" ></el-option>
                    </el-select>
                </el-form-item> 
                <el-form-item label="逆风出装" width="120">
                    <el-select v-model="model.items2" multiple>
                    <el-option v-for="item of items" :label="item.name" :value='item._id' :key="item._id" ></el-option>
                    </el-select>
                </el-form-item> 
                <el-form-item label="使用技巧">
                        <el-input type='textarea' v-model="model.usageTips"/>
                </el-form-item>
                <el-form-item label='对抗技巧'>
                        <el-input type='textarea' v-model="model.battleTips"/>
                </el-form-item>
                <el-form-item label="团战技巧">
                        <el-input type='textarea' v-model="model.teamTips"/>
                </el-form-item>
                </el-tab-pane>

                <el-tab-pane label='技能'  name='skills'>
                <el-button size='small' @click="model.skills.push({})"> <i class="el-icon-plus"></i>添加技能</el-button>
                <el-row type='flex'>
                    <el-row>
                        <!-- :md='12'表示普通屏幕一行显示两个框 -->
                        <el-col :md='24' v-for='(item,i) in model.skills' v-bind:key='i'>
                            <el-form-item label='名称'>
                                <el-input v-model='item.name'/>
                            </el-form-item>
                            <el-form-item label='图标'>
                                 <el-upload 
                                    class="avatar-uploader"
                                    :action="uploadURL"
                                    :headers="getAuthHeaders()"
                                    :show-file-list="false"
                                    :on-success="res=>$set(item,'icon',res.url)"
                                    >
                                        <!-- 有图片显示图片，没有则显示上传图标,:src显示的图片 -->
                                        <img v-if="item.icon" :src="item.icon" class="avatar"/>
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </el-form-item>
                            <el-form-item label='描述'>
                                <el-input type='textarea'  placeholder='请输入描述' v-model='item.description'/>
                            </el-form-item>
                             <el-form-item label='小提示'>
                                <el-input type='textarea'  placeholder='请输入小提示' v-model='item.tips'/>
                            </el-form-item>
                            <el-form-item label='消耗值'>
                                <el-input v-model='item.cost' placeholder='请输入消耗值'>消耗值</el-input>
                            </el-form-item>
                             <el-form-item label='冷却值'>
                                <el-input v-model='item.delay' placeholder='请输入冷却值'>冷却值</el-input>
                            </el-form-item>
                             <el-form-item>
                                <el-button size='small' type='danger' @click="model.skills.splice(i,1)">
                                    删除
                                </el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-row>
           </el-tab-pane>
            
        <el-tab-pane label="最佳搭档" name="partners">
          <el-button size="small" @click="model.partners.push({})">
            <i class="el-icon-plus"></i> 添加英雄
          </el-button>
          <el-row type="flex" style="flex-wrap: wrap">
            <el-col :md="12" v-for="(item, i) in model.partners" :key="i">
              <el-form-item label="英雄">
                <el-select filterable v-model="item.hero">
                  <el-option 
                  v-for="hero in heroes"
                  :key="hero._id"
                  :value="hero._id"
                  :label="hero.name"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="描述">
                <el-input v-model="item.description" type="textarea"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button size="small" type="danger" @click="model.partners.splice(i, 1)">删除</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
      <el-form-item style="margin-top: 1rem;">
        <el-button type="primary" native-type="submit">保存</el-button>
      </el-form-item>
    </el-form>
    </div>
</template>

<script>
export default {
    props:{
        id:{}
    },
    data(){
        return{
            model:{
                name:'',
                avatar:'',
                scores:{diffcult:0},
                skills:[],
                partners:[],

            },
            categories:[],
            items:[],
            heroes:[]
        }
    },
    methods:{
        async save(){
            let res
            if(this.id){
                res = await this.$http.put(`rest/Heroes/${this.id}`,this.model)
            }else{
                res = await this.$http.post('rest/Heroes',this.model)
            }
            this.$router.push('/Heroes/list')
            this.$message({
                type:'success',
                message:'保存成功'
            })
        },
        async fetch(){
            const res = await this.$http.get('rest/Heroes/'+this.id)
            this.model = Object.assign({},this.model,res.data)
            // 这样写也行
            // this.model = {...this.model,...res.data}
        },
        async fetchCategories(){
            const res = await this.$http.get('rest/Categories')
            this.categories = res.data
         },
         async fetchItems(){
            const res = await this.$http.get('rest/Items')
            this.items = res.data
         },
         async fetchHeros(){
            const res = await this.$http.get('rest/Heroes')
            this.heroes = res.data
         },
    },
    created(){
        this.fetchCategories()
        this.fetchItems()
        this.fetchHeros()
        this.id && this.fetch()
        // 等价于
        // if(this.id){
        //     this.fetch()
        // }
    }
}
</script>



<style scoped>
 
</style>